<template>
  <el-container ref="container">
    <el-header style="height: auto">
      <!-- 按钮集合 -->
      <buttonGroup :buttonGroups="buttonGroups" />
    </el-header>

    <el-main>
      <tableView :viewData="viewData" :columnConfigs="columnConfigs" v-model="selectData">
      </tableView>
    </el-main>

    <el-dialog :title="dialogFormTitle" width="800px" :modal-append-to-body='false' :visible.sync="dialogFormVisible">
      <dialogForm :pkid="pkid" :menuid="menuId" @closeMoule="closeMoule" />
    </el-dialog>
  </el-container>
</template>

<script>
import buttonGroup from "@/components/button/group";
import tableView from "@/components/table/view";
import dialogForm from "./edit.vue";
export default {
  components: {
    "buttonGroup": buttonGroup,
    "tableView": tableView,
    'dialogForm': dialogForm,
  },
  data() {
    return {
      loading: true,
      dialogFormVisible: false,
      pkid: 0,
      dialogFormTitle: '新增按钮',
      buttonGroups: [{
        icon: "el-icon-plus",
        text: "添 加",
        type: "primary",
        _click: () => {
          this.dialogFormVisible = true
        },
      }],
      selectData: [],
      viewData: [],
      columnConfigs: [{
        prop: "BtnId",
        type: "selection",
      }, {
        prop: "BtnCode",
        label: "权限编码",
        icon: "el-icon-time",
      }, {
        prop: "BtnName",
        label: "权限名称"
      },
      {
        prop: "enabled",
        label: "是否启用",
        createScopeTemplate: (rowData) => {
          rowData.enabled= rowData.Enabled==1?true:false
          var listScopeTemplate = []
          var item = {
            componentName: 'form-switch',
          }
          listScopeTemplate.push(item)

          return listScopeTemplate

        },
      }, {
        prop: "",
        label: "操作",
        listScopeTemplate: [
          {
            componentName: "button-input",
            icon: "el-icon-edit",
            type: "primary",
            text: "编辑",
            _click: (index, row) => {
              this.dialogFormTitle = "编辑按钮";
              this.pkid = row.BtnId;
              this.dialogFormVisible = true;
            },
          },],
      },],
    };
  },
  created() {
    this.search()
  },
  computed: {
    menuId() {
      return this.$route.query.menuId;
    },
  },
  methods: {
    search() {
      let query = {
        user: "string",
        target: "BtnInfo",
        operation: "Get",
        json: {
          Condition: 'MenuId=@MenuId',
          Params: {
            MenuId: this.menuId
          }
        }
      }
      // 请求接口
      this.$http.post("/api/common/opera", query, (res) => {

        this.loading = false;
        if (res.Code == 200) {
          //获取菜单信息
          this.viewData = res.Data
        }
      });
    },
    closeMoule(obj) {
      this.pkid = 0;
      this.dialogFormVisible = false;
      if (obj) {
        this.search();
      }
    }
  },
  watch: {},
};
</script>